<template>
    <el-dialog title="选择套餐" :visible.sync="dialogVisible" :close-on-click-modal="false">
        <div class="content" @click.stop="()=>{}">
            <el-form label-position="left" label-width="100px" style="width: 100%; padding-left: 20px;">
                <el-form-item label="所选套餐：" v-if="config.count !== 1">
                    <div class="el-tag-box">
                        <el-tag v-for="(item, index) of result" :key="item.packageId" :closable="true" @close="delItem(index)">{{item.name}}</el-tag>
                    </div>
                </el-form-item>
            </el-form>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="100px" style="width: 100%">
                <input type="text" style="display: none"/><!--form input placeholder-->
                <el-row>
                    <el-col>
                        <el-form-item label="套餐名称：" prop="name">
                            <el-input @keyup.enter.native="search" v-model="listQuery.name" placeholder="按套餐名称搜索" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
                <el-table-column align="center" width="50">
                    <template slot-scope="scope">
                        <label class="input-radio" v-if="config.count === 1">
                            <input type="radio" :value="{packageId: scope.row.packageId}" v-model="itemsRadio" @change="(e) => setValue(e.target.checked, scope.row)"/>
                            <span></span>
                        </label>
                        <label class="input-checkbox" v-else>
                            <input type="checkbox" :value="{packageId: scope.row.packageId}" v-model="itemsCheck" @change="(e) => setValue(e.target.checked, scope.row)"/>
                            <span></span>
                        </label>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="套餐名称" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div class="text-justify">
                            <p v-text="scope.row.name"></p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="套餐类型" width="110">
                    <template slot-scope="scope">
                        <span v-text="types[scope.row.type]"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="市场价" width="110">
                    <template slot-scope="scope">
                        <span>{{scope.row.marketValue | money}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="兰蜜价" width="110">
                    <template slot-scope="scope">
                        <span>{{scope.row.price | money}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, prev, pager, next, jumper"
                    style="text-align: center"
                    :total="listTotal">
            </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer" @click.stop="()=>{}">
            <el-button type="primary" :loading="btnLoading" @click="choose">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </el-dialog>
</template>
<script>
  export default {
    name: 'choose-package',
    props: {
      config: { type: Object, default(){ return {} } },
      selected: { type: Array, default(){ return [] } },
    },
    data(){
      return {
        types: {
          '1': '固定模式',
          '2': '自由组合模式',
        },

        dialogVisible: true,
        btnLoading: false,
        result: this.selected,
        itemsCheck: this.selected.length ? this.selected.map(item => { return { packageId: item.packageId }}): [],
        itemsRadio: this.selected.length ? {packageId: this.selected[0].packageId} : {},

        listQuery: {
          name: '',
          excludeCrush: this.config.excludeCrush || 0,
          isPage: 1,
          pageIndex: 1,
          pageSize: 10
        },
        list: [],
        listTotal: 0,
        listLoading: false
      }
    },
    created(){
      this.getList()
    },
    methods: {
      // 获取列表
      getList() {
        this.listLoading = true;
        let url = ''
        let methodType = 'post'
        if(this.config.type) {
          switch (this.config.type) {
            case 'combo': // 组合套餐的筛选
              url = '/bsnl-product/combo/package/packageList'
              methodType = 'get'
              break
            default:
              url = '/bsnl-product/package/list'
          }
        } else {
          url = '/bsnl-product/package/list'
        }
        const query = {
          url: url,
          method: methodType
        }
        if (methodType === 'post') {
          query.data = this.listQuery
        } else {
          this.listQuery.existsPresetFlag = this.config.existsPresetFlag
          query.params = this.listQuery
        }
        this.request(query).then(({data, totalCount}) => {
          this.list = data;
          this.listTotal = totalCount;
          this.listLoading = false;
        }).catch(err => {
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      // 搜索
      search() {
        this.listQuery.pageIndex = 1;
        this.getList();
      },
      // 切换分页
      handleCurrentChange(page) {
        this.listQuery.pageIndex = page;
        this.getList();
      },
      // 选择change
      setValue(checked, row){
        if(checked){
          if(this.config.count ===1 ){
            this.result = [row]
          } else {
            this.result.push({ ...row });
          }
        } else {
          let index = this.itemsCheck.findIndex(item => row.packageId === item.packageId);
          this.result.splice(index, 1);
        }
      },
      // 单击行
      clickRow(row) {
        if (this.config.count === 1) {
          this.itemsRadio = { packageId: row.packageId };
          this.result = [row];
        } else {
          let index = this.itemsCheck.findIndex(item => row.packageId === item.packageId);
          if (index < 0){
            this.itemsCheck.push({ packageId: row.packageId });
            this.result.push({ ...row });
          } else {
            this.itemsCheck.splice(index, 1);
            this.result.splice(index, 1);
          }
        }
      },
      // 通过tag删除
      delItem(index) {
        this.itemsCheck.splice(index, 1);
        this.result.splice(index, 1);
      },
      // 关闭弹窗
      close(){
        this.dialogVisible = false;
        document.body.removeChild(this.$el);
      },
      // 选完，点击确定
      choose(){
        if(this.result.length < 1){
          return this.$message.error('请选择套餐');
        }
        if(this.config.count > 0 && this.itemsCheck.length > this.config.count){
          return this.$message.error(`最多选择${this.config.count}个套餐`);
        }
        this.$emit('choose', this.result);
        this.close();
      }
    }
  }
</script>
